<template>
  <div id="box">
    <div class="header">
      <van-nav-bar title="我是业主" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="content">
      <Great></Great>
      <House></House>
           <h3>好赞服务</h3>
        <div class="zanimg">
            <img src="@/assets/zan_03.gif" alt="">
        </div>
        <h3>业主咨询</h3>
      <Good></Good>
        <h3>金融服务</h3>
      <div class="jin" @click="jinrong()">
        <img src="@/assets/jinrong_03.gif" alt="">
      </div>
    </div>
    <div class="footer">
<van-button type="primary">添加房产</van-button>
<van-button type="info" @click="fun()">我要买房</van-button>
    </div>
  </div>
</template>
<script>
import Great from "@/components/mes/great.vue";
import House from "@/components/mes/house.vue";
import Good from "@/components/mes/good.vue";


export default {
  methods: {
    onClickLeft() {
      this.$router.push("/me");
    },
    jinrong(){
      this.$router.push("/financial");
    },
    fun(){
      this.$router.push("/blink")
    }
  },
  components: {
    Great,
    House,
    Good
  },
};
</script>
<style scoped>
#box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}
.content {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}
h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 20px 0;
}
.zanimg{
    width: 100%;
    height: 100px;
}
.zanimg img{
    width: 100%;
    height: 100%;
}
.jin{
  width: 100%;
  height: 137px;
  margin-bottom: 30px;
}
.jin img{
  width: 100%;
  height: 100%;
}
.footer{
  width: 100%;
  height: 80px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
.van-button {
  width: 162px;
  height: 50px;
  align-self: center;
}
</style>